import { Button, message } from 'antd';
import { useRef } from 'react';

// getDisplayMedia API
// https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia
const ContentShare = () => {
    const videoRef = useRef<HTMLVideoElement>(null)
    const handleErr = (e: Error) => {
        message.error(e?.message || `摄像头打开失败`);
        console.log('getUserMedia err: ', e);
    }

    const startShare = async () => {
        try {
            const stream = await navigator.mediaDevices.getDisplayMedia({video: true});
            const video = videoRef.current as HTMLVideoElement;
            video.srcObject = stream;
        } catch (e) {
            handleErr(e as Error);
        }
    }

    return (
        <div>
            <h3>屏幕共享</h3>
            <video ref={videoRef} controls width={640} autoPlay></video><br />
            <Button onClick={startShare} type="primary">共享屏幕</Button>
        </div>
    );
}

export default ContentShare;
